<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

<title>여기에 제목 입력</title>

<!-- 모바일 웹 페이지 설정 -->
<link rel="shortcut icon" href="assets/ico/favicon.png" />
<link rel="apple-touch-icon-precomposed"
	href="assets/ico/apple-touch-icon-57-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72"
	href="assets/ico/apple-touch-icon-72-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114"
	href="assets/ico/apple-touch-icon-114-precomposed.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144"
	href="assets/ico/apple-touch-icon-144-precomposed.png" />
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome/css/font-awesome-ie7.css" />
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome/css/font-awesome-ie7.min.css" />
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome-4.0.3/css/font-awesome.css" />
<link rel="stylesheet" type="text/css"
	href="assets/font-awesome-4.0.3/css/font-awesome.min.css" />

<!-- bootstrap -->
<link rel="stylesheet" type="text/css"
	href="assets/css/bootstrap.min.css" />
<!-- 나눔고딕 웹 폰트 적용 -->
<link rel="stylesheet" type="text/css" href="assets/css/nanumfont.css" />
<!-- 반응형 웹을 지원하지 않을 경우 -->
<!-- <link rel="stylesheet" href="assets/css/non-responsive.css" /> -->

<!-- IE8 이하 버전 지원 -->
<!--[if lt IE 9]>
		<script type="text/javascript" src="assets/js/html5shiv.js"></script>
		<script type="text/javascript" src="assets/js/respond.min.js"></script>
		<![endif]-->

<!-- IE10 반응형 웹 버그 보완 -->
<!--[if gt IE 9]>
		<link rel="stylesheet" type="text/css" href="assets/css/ie10.css" />
		<script type="text/javascript" src="assets/js/ie10.js"></script>
		<![endif]-->


<title>metro_timesheet</title>

<style type="text/css">
body {
	padding-top: 50px;
}

ul,li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#list-header2 {
	position: absolute;
	top: 100px;
}

.sub-header-box {
	background: #000000;
	display: none;
}

body.modal-open,.modal-open .navbar-fixed-top,.modal-open .navbar-fixed-bottom
	{
	margin-right: 0px !important;
}

.metro-list-center {
	display: inline-block;
	border: 1px solid #000;
	height: 75px;
	width: 75px;
	border-radius: 50%;
}

.center_text {
	vertical-align: middle;
	text-align: center;
}

.metro-list-right {
	display: inline-block;
}

.metro-list-left {
	display: inline-block;
}

table > thead > tr > th:FIRST-CHILD {
	text-align: right;
}

table > tbody > tr > td:FIRST-CHILD {
	text-align: right;
}
</style>

</head>

<body>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container text-center">

			<span id="list-header1" class="text-primary"><strong></strong></span>
			<div class="pull-left">
				<button class="btn btn-info nav_btns" onclick="history.back();">
					<i class="icon-arrow-left"></i>
				</button>
			</div>
		</div>
	</nav>

	<div class="content">


		<div id="metro0">
			<span class="metro-list metro0"> </span>
		</div>

		<div id="metro1">
			<span class="metro-list metro1"> </span>
		</div>

		<div id="metro2">
			<span class="metro-list metro2"> </span>
		</div>

		<div id="metro3">
			<span class="metro-list metro3"> </span>
		</div>
	</div>

	<table class="table table-striped"></table>




	<!-- Javascript -->
	<script src="assets/js/jquery.js"></script>
	<script src="assets/js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function() {
			$('strong').html(sessionStorage["stn_nm"] + "역 시간표");
			var time = new Date();
			var day = 1;

			if (time.getDay() == 0) {
				day = 3;
			} else if (time.getDay() == 6) {
				day = 2;
			}

			var stn_cd = new Array();
			stn_cd = sessionStorage["stn_cd"].split(",");
			for (var i = 0; i < stn_cd.length / 2; i++) {
				for (var io_tag = 1; io_tag <= 2; io_tag++) {
					wheremetro(stn_cd[i * 2], day, io_tag, i);
				}
			}

			$(document).on(
					'click',
					'.metro-list-left',
					function() {
						timesheet(stn_cd[$(this).attr('leng') * 2], day,
								$(this).attr('io'));
						return false;
					});

			$(document).on(
					'click',
					'.metro-list-right',
					function() {
						timesheet(stn_cd[$(this).attr('leng') * 2], day,
								$(this).attr('io'));
						return false;
					});
		});

		function wheremetro(stn_cd, week_tag, io_tag, leng) {
			var timesh = '';
			var stn_url = "http://openapi.seoul.go.kr:8088/6372696d77617832303631/json/SearchArrivalInfoByIDService/1/5/"
					+ stn_cd + "/" + io_tag + "/" + week_tag + "/";
			$.ajax({
						url : stn_url,
						dataType : "jsonp",
						timeout : 30000,
						cache : false,
						success : function(req) {							
							var line_num = new Array();
							line_num = sessionStorage["stn_cd"].split(",");
							var arrive = req.SearchArrivalInfoByIDService.row[0].LEFTTIME;
							var time = new Date();
							if ((parseInt(arrive.substring(0, 2)) - time.getHours()) * 60 + (parseInt(arrive.substring(3, 5)) - time.getMinutes()) == 0) {
								if (io_tag == 1) {
									timesh += '<span class="metro-list-left btn btn-default" io="' + io_tag + '" leng="' + leng + '">';
									timesh += '현재 역 도착';
									timesh += '<br />';
									timesh += '<i class="fa fa-arrow-left"></i>';
									timesh += '<br />';
									timesh += req.SearchArrivalInfoByIDService.row[0].SUBWAYNAME + '행';
									timesh += '</span>';
								} else if (io_tag == 2) {
									timesh += '<span>';
									timesh += '<div class="metro-list-center">';
									timesh += '<div class="center_text">';
									timesh += '<br />';
									timesh += line_num[leng * 2 + 1] + '<br />';
									timesh += '</div>';
									timesh += '</div>';
									timesh += '</span>';
									timesh += '<span class="metro-list-right btn btn-default" io="' + io_tag + '" leng="' + leng + '">';
									timesh += '현재 역 도착';
									timesh += '<br />';
									timesh += '<i class="fa fa-arrow-right"></i>';
									timesh += '<br />';
									timesh += req.SearchArrivalInfoByIDService.row[0].SUBWAYNAME + '행';
									timesh += '</span>';
								}
							} else if ((parseInt(arrive.substring(0, 2)) - time.getHours()) * 60 + (parseInt(arrive.substring(3, 5)) - time.getMinutes()) < 60) {
								if (io_tag == 1) {
									timesh += '<span class="metro-list-left btn btn-default" io="' + io_tag + '" leng="' + leng + '">';
									timesh += (parseInt(arrive.substring(0, 2)) - time.getHours()) * 60 + (parseInt(arrive.substring(3, 5)) - time.getMinutes()) + '분 후 도착';
									timesh += '<br />';
									timesh += '<i class="fa fa-arrow-left"></i>';
									timesh += '<br />';
									timesh += req.SearchArrivalInfoByIDService.row[0].SUBWAYNAME + '행';
									timesh += '</span>';
								} else if (io_tag == 2) {
									timesh += '<span>';
									timesh += '<div class="metro-list-center">';
									timesh += '<div class="center_text">';
									timesh += '<br />';
									timesh += line_num[leng * 2 + 1] + '<br />';
									timesh += '</div>';
									timesh += '</div>';
									timesh += '</span>';
									timesh += '<span class="metro-list-right btn btn-default" io="' + io_tag + '" leng="' + leng + '">';
									timesh += (parseInt(arrive.substring(0, 2)) - time.getHours()) * 60 + (parseInt(arrive.substring(3, 5)) - time.getMinutes()) + '분 후 도착';
									timesh += '<br />';
									timesh += '<i class="fa fa-arrow-right"></i>';
									timesh += '<br />';
									timesh += req.SearchArrivalInfoByIDService.row[0].SUBWAYNAME + '행';
									timesh += '</span>';
								}
							} else {
								if (io_tag == 1) {
									timesh += '<span class="metro-list-left btn btn-default" io="' + io_tag + '" leng="' + leng + '">';
									timesh += '도착 정보가 없습니다.';
									timesh += '<br />';
									timesh += '<i class="fa fa-arrow-left"></i>';
									timesh += '<br />';
									timesh += req.SearchArrivalInfoByIDService.row[0].SUBWAYNAME + '행';
									timesh += '</span>';
								} else if (io_tag == 2) {
									timesh += '<span>';
									timesh += '<div class="metro-list-center">';
									timesh += '<div class="center_text">';
									timesh += '<br />';
									timesh += line_num[leng * 2 + 1] + '<br />';
									timesh += '</div>';
									timesh += '</div>';
									timesh += '</span>';
									timesh += '<span class="metro-list-right btn btn-default" io="' + io_tag + '" leng="' + leng + '">';
									timesh += '도착 정보가 없습니다.';
									timesh += '<br />';
									timesh += '<i class="fa fa-arrow-right"></i>';
									timesh += '<br />';
									timesh += req.SearchArrivalInfoByIDService.row[0].SUBWAYNAME + '행';
									timesh += '</span>';
								}
							}

							$(".metro" + leng).append(timesh);
						},
						error : function(xhr, status, error) {
						}
					});
		}

		function timesheet(stn_cd, week_tag, io_tag) {
			var th = '';
			th += '<thead><tr>';
			th += '<th>시</th>';
			th += '<th>분</th>';
			th += '</tr></thead><tbody>';

			var t5 = '<tr><td>5</td><td>';
			var t6 = '<tr><td>6</td><td>';
			var t7 = '<tr><td>7</td><td>';
			var t8 = '<tr><td>8</td><td>';
			var t9 = '<tr><td>9</td><td>';
			var t10 = '<tr><td>10</td><td>';
			var t11 = '<tr><td>11</td><td>';
			var t12 = '<tr><td>12</td><td>';
			var t13 = '<tr><td>13</td><td>';
			var t14 = '<tr><td>14</td><td>';
			var t15 = '<tr><td>15</td><td>';
			var t16 = '<tr><td>16</td><td>';
			var t17 = '<tr><td>17</td><td>';
			var t18 = '<tr><td>18</td><td>';
			var t19 = '<tr><td>19</td><td>';
			var t20 = '<tr><td>20</td><td>';
			var t21 = '<tr><td>21</td><td>';
			var t22 = '<tr><td>22</td><td>';
			var t23 = '<tr><td>23</td><td>';
			var t24 = '<tr><td>24</td><td>';

			var stn_url = "ajax/json/" + stn_cd + "_" + week_tag + "_" + io_tag
					+ ".json";
			$.ajax({
						url : stn_url,
						dataType : "json",
						timeout : 30000,
						cache : false,
						success : function(req) {
							var check = 0;
							for (var i = 0; i < req.length; i++) {
								if (parseInt(req[i].ARRIVETIME.substring(0, 2)) == 0 || parseInt(req[i].ARRIVETIME.substring(0, 2)) > 24) {
									continue;
								}

								if (i > 0 && parseInt(req[i].ARRIVETIME.substring(0, 2)) < parseInt(req[i - 1].ARRIVETIME.substring(0, 2))) {
									continue;
								}

								if (parseInt(req[i].ARRIVETIME.substring(0, 2)) == 24) {
									check = 1;
								}

								if (check == 1 && parseInt(req[i].ARRIVETIME.substring(0, 2)) < 24) {
									continue;
								}

								if (parseInt(req[i].ARRIVETIME.substring(0, 2)) == 5) {
									t5 += req[i].ARRIVETIME.substring(3, 5);
									t5 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 6) {
									t6 += req[i].ARRIVETIME.substring(3, 5);
									t6 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 7) {
									t7 += req[i].ARRIVETIME.substring(3, 5);
									t7 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 8) {
									t8 += req[i].ARRIVETIME.substring(3, 5);
									t8 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 9) {
									t9 += req[i].ARRIVETIME.substring(3, 5);
									t9 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 10) {
									t10 += req[i].ARRIVETIME.substring(3, 5);
									t10 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 11) {
									t11 += req[i].ARRIVETIME.substring(3, 5);
									t11 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 12) {
									t12 += req[i].ARRIVETIME.substring(3, 5);
									t12 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 13) {
									t13 += req[i].ARRIVETIME.substring(3, 5);
									t13 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 14) {
									t14 += req[i].ARRIVETIME.substring(3, 5);
									t14 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 15) {
									t15 += req[i].ARRIVETIME.substring(3, 5);
									t15 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 16) {
									t16 += req[i].ARRIVETIME.substring(3, 5);
									t16 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 17) {
									t17 += req[i].ARRIVETIME.substring(3, 5);
									t17 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 18) {
									t18 += req[i].ARRIVETIME.substring(3, 5);
									t18 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 19) {
									t19 += req[i].ARRIVETIME.substring(3, 5);
									t19 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 20) {
									t20 += req[i].ARRIVETIME.substring(3, 5);
									t20 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 21) {
									t21 += req[i].ARRIVETIME.substring(3, 5);
									t21 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 22) {
									t22 += req[i].ARRIVETIME.substring(3, 5);
									t22 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 23) {
									t23 += req[i].ARRIVETIME.substring(3, 5);
									t23 += ' ';
								} else if (parseInt(req[i].ARRIVETIME
										.substring(0, 2)) == 24) {
									t24 += req[i].ARRIVETIME.substring(3, 5);
									t24 += ' ';
								}
							}

							t5 += '</td></tr>';
							t6 += '</td></tr>';
							t7 += '</td></tr>';
							t8 += '</td></tr>';
							t9 += '</td></tr>';
							t10 += '</td></tr>';
							t11 += '</td></tr>';
							t12 += '</td></tr>';
							t13 += '</td></tr>';
							t14 += '</td></tr>';
							t15 += '</td></tr>';
							t16 += '</td></tr>';
							t17 += '</td></tr>';
							t18 += '</td></tr>';
							t19 += '</td></tr>';
							t20 += '</td></tr>';
							t21 += '</td></tr>';
							t22 += '</td></tr>';
							t23 += '</td></tr>';
							t24 += '</td></tr>';

							th += t5 + t6 + t7 + t8 + t9 + t10 + t11 + t12
									+ t13 + t14 + t15 + t16 + t17 + t18 + t19
									+ t20 + t21 + t22 + t23 + t24;
							th += '</tbody>';

							$('.table').html(th);
						},
						error : function(xhr, status, error) {
						}
					});
		}
	</script>
</body>
</html>
